<template>
	<view>
		<view class="u-m-b-20" style="position: relative;">
			<!-- <image src="/static/logo.png" style="height: 720rpx; width: 100%;" mode=""></image> -->
			<swiper class="swiper" style="height: 720rpx; width: 100%;" :disable-touch="stopTouchMove" :autoplay="autoPlay" :current="current" @change="changeHandle">
				<swiper-item v-if="video != ''">
					<view v-if="show" style="position: relative;" @click="bofang">
						<image :src="videoCoverImg" style="width: 100%;" mode="widthFix"></image>
						<image src="/static/shangpin/bofang.png" mode="" style="width:105rpx;height:78rpx;position: absolute;top: 40%;left: 50%;transform: translateX(-50%);"></image>
					</view>
					<view v-if="!show" class="item" style="width: 100%;height: 100%;">
						<video class="video" id="myVideo" :autoplay="false" :enable-progress-gesture="true" show-center-play-btn="false" :src="video"  style="width: 100%;height: 100%;" :play-strategy="1" :controls="controls" direction="0"  @pause="endVideo(false)">
						</video>
					</view>
					
				</swiper-item>
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.url " style="height: 720rpx; width: 100%;" mode=""></image>
					<!-- <image :src="baseUrl + 'api/Resource/GetImage/' + item.resourceId + '_low.png'" style="height: 720rpx; width: 100%;" mode=""></image> -->
				</swiper-item>
				
			</swiper>
			<view class="number-step">
				{{ current + 1 }}/{{ swiperTotal }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default: []
			},
			video: {
				type: String,
				default: ''
			},
			isShow: {
				type: Boolean,
				default: false
			},
			videoCoverImg: {
				type: String,
				default: ''
			}
		},
		async onLoad(options) {
			//创建一个视频上下文的操作对象，通过id标识获取myVideo
			this.videoContext = uni.createVideoContext('myVideo')
		},
		mounted() {
			//创建一个视频上下文的操作对象，通过id标识获取myVideo
			this.videoContext = uni.createVideoContext('myVideo')
		},
		// computed: {
		// 	show() {
		// 		return this.isShow
		// 	}
		// },
		data() {
			return {
				current: 0,
				stopTouchMove: false,
				autoPlay: false,
				controls: false,
				show: this.isShow
			}
		},
		computed: {
			swiperTotal() {
				if (this.video != '') {
					return this.swiperList.length + 1
				}
				return this.swiperList.length
			}
		},
		methods: {
			// 视频
			playVideo() {
				this.show = false
				this.stopTouchMove = true
				this.autoPlay = false
			},
			endVideo() {
				this.controls = false,
				this.show = true
				this.stopTouchMove = false
				this.autoPlay = true
			},
			bofang() {
				console.log(this.video)
				this.show = !this.show
				this.controls = !this.controls
				this.videoContext.play()
			},
			changeHandle(e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.number-step {
		position: absolute;
		bottom: 20rpx;
		right:20rpx;
		color: #FFFFFF;
		background-color:rgba(0,0,0,0.3);
		border-radius: 50rpx;
		padding: 5rpx 30rpx;
	}
</style>
